<template>
  <div class="bottom">
    <div class="btn-item" v-for="(item,index) of itemList" :key="index">
      <router-link :to="item.href" :class="[bottomActive == index ? 'active' : '']">
        <div class="item">
          <span class="iconfont" :class="item.icon"></span>
          <p>{{ item.title }}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Footer',
    props: {
      bottomActive: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        itemList: [
          {
            id: 0,
            title: '首页',
            icon: 'icon-shouye',
            href: '/home'
          },
          {
            id: 1,
            title: '热门',
            icon: 'icon-dianzan',
            href: '/consultation'
          },
          {
            id: 2,
            title: '服务',
            icon: 'icon-fuwu_o',
            href: '/service'
          },
          {
            id: 3,
            title: '我的',
            icon: 'icon-Fill',
            href: '/my'
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
.bottom{
  position: fixed;
  bottom:0;
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #d6d6d6;
  background-color: rgba(246,246,246,0.95);
  z-index: 999;
  .btn-item{
    text-decoration: none;
    flex: 1;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,1);
    width: 25%;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .item{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    a{
      text-decoration: none;
      color: #999;
      font-size:12px;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:rgba(0,0,0,1);
    }
    .active{
      color: #3B8BFB;
      font-size:12px;
      font-family:PingFangSC-Regular;
      font-weight:400;
    }
  }
}
</style>
